<template>
  <div style="display: inline-block;text-align: left;">
    <!-- 修改 - btn -->
    <el-button type="success" size="small" @click="clickToView" >身份证照片</el-button>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" width="800px" title="身份证照片" @close="close">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item, index) in productDrawing" :key="index" style="text-align: center">
          <img :src="item" alt="" style="width: 450px;height: 100%;">
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
// import store from '@/store'

export default {
  name: 'SlideShow',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      productDrawing: []
    }
  },
  methods: {
    clickToView() {
      this.dialogTableVisible = true
      // console.log('this.row_data', this.row_data)
      this.productDrawing = []
      if (this.row_data.id_card_front) {
        this.productDrawing.push(this.row_data.id_card_front)
      }
      if (this.row_data.reverse_of_id_card) {
        this.productDrawing.push(this.row_data.reverse_of_id_card)
      }
      // console.log('this.productDrawing', this.productDrawing)
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
